<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入样式表 -->
    <link rel="stylesheet" href="./assets/news.css" />
  </head>

  <body>
    <!-- 新闻列表 -->
    <div id="news-list"></div>

    <!-- 导入axios -->
    <script src="./lib/axios.js"></script>
    <script>
      //请求地址：http://ajax-api.itheima.net/api/news
      //获取dom元素
      const newsList = document.querySelector('#news-list')

      //声明一个渲染函数
      const renderNewsList = () => {
        //发起ajax请求，获取渲染数据
        async function response(){
         const result= await axios.get('http://ajax-api.itheima.net/api/news')
         let {data: res}=result
         const { data } = res

            newsList.innerHTML = data
              .map((item) => {
                return `
              <div class="news-item">
              <img
                class="thumb"
                src="${item.img}"
                alt=""
              />
              <div class="right-box">
                <!-- 新闻标题 -->
                <h1 class="title">${item.title}</h1>
                <div class="footer">
                  <div>
                    <!-- 新闻来源 -->
                    <span>${item.source}</span>&nbsp;&nbsp;
                    <!-- 发布日期 -->
                    <span>${item.time}</span>
                  </div>
                  <!-- 评论数量 -->
                  <span>评论数：${item.cmtcount}</span>
                </div>
              </div>
            </div>`
              })
              .join('')
        }
        response()
        // axios
        //   .get('http://ajax-api.itheima.net/api/news')
        //   //使用响应的数据
        //   .then(({ data: res }) => {
        //     const { data } = res

        //     newsList.innerHTML = data
        //       .map((item) => {
        //         return `
        //       <div class="news-item">
        //       <img
        //         class="thumb"
        //         src="${item.img}"
        //         alt=""
        //       />
        //       <div class="right-box">
        //         <!-- 新闻标题 -->
        //         <h1 class="title">${item.title}</h1>
        //         <div class="footer">
        //           <div>
        //             <!-- 新闻来源 -->
        //             <span>${item.source}</span>&nbsp;&nbsp;
        //             <!-- 发布日期 -->
        //             <span>${item.time}</span>
        //           </div>
        //           <!-- 评论数量 -->
        //           <span>评论数：${item.cmtcount}</span>
        //         </div>
        //       </div>
        //     </div>`
        //       })
        //       .join('')
        //   })
      }

      //调用一下函数
      renderNewsList()
    </script>
  </body>
</html>
